<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <style>
        body{
            width: 1600px;
        }
    </style>





    <br><br><br><br><br><br>

    <h1>  bootstrap SVG 仓库:  
        <a  target="_blank" href="https://icons.getbootstrap.com/">https://icons.getbootstrap.com/</a>
    </h1>
    <br><br><br>
    
    <hr>

    <h1> SVG 和 字体库的比较  (  会发现字体更加适合对齐排版, 推荐使用字体 ) </h1>
    <button style=" font-size: 123px; color: darkcyan; border: none; border: 3px solid red;  ">
        <svg xmlns="http://www.w3.org/2000/svg" width="123"  fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
            <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
          </svg>  <span>ABC</span>  <i class="bi bi-person-circle"></i>
    </button>
    <br><br><br>


    
    <h1>  这是用  base64 实现 , 缺点是不容易改变颜色, 以及更换是很麻烦的   </h1>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .s1 {
            font-size: 120px;
            color: red;
            background: lightblue;
        }

        .s1::after {
            font-size: 200px;
            content: '';
            color: #777;
            font-weight: bold;
            /* float: right; */
            position: relative;
            top: 15px;
            background: url() no-repeat center;
            display: inline-block;
            /* background: lightblue; */
            width: 120px;
            height: 120px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50%;
            -webkit-transform: rotate(180deg) translateZ(0);
            transform: rotate(180deg) translateZ(0);
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
        }

        .icon-user-plus:before {
            content: "\1f301";
        }
    </style>
    <span class="s1">test</span>



    <hr>



    <!-- <link rel="stylesheet" href="../bootstrap-fonts/bootstrap-font.css"> -->
    <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap-icons/1.8.0/font/bootstrap-icons.css" type="text/css" rel="stylesheet" />







    <h1>  这是用 字体实现 ,  缺点是需要引入体积巨大的字体库 </h1>
    <div style="font-size: 123px; color: red;">
        <i class="bi bi-twitter"></i>
         <span>123456</span>
    </div>
      
    <hr>


    <h1>  这是用 SVG 实现 </h1>
    <div style=" font-size: 123px;  color: green; ">
        <svg xmlns="http://www.w3.org/2000/svg" width="123px"  fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
            <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
          </svg>
          <span>123456</span>
    </div>





    <hr>


    <h1>  这是用 SVG 实现 </h1>
    <style>
        .aa2 svg{
            position: relative;
            top: -10px;
            transition: 0.3s;
            font-weight: bolder;
        }
        .aa-active{
            transform: rotate(180deg) translateZ(0); 
        }
    </style>
    <div style=" font-size: 120px;  color: darkorange;  " class="aa2">
        <span>123456</span><svg xmlns="http://www.w3.org/2000/svg" width="60"    fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
          </svg>
    </div>
    <script>
        // style.cssText = "  "
        document.getElementsByClassName("aa2")[0].onclick = function () {
            document.querySelector(".aa2 svg").classList.toggle("aa-active")
        }
    </script>



<hr>




    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nation-table-cell-arrow {
            background-image: url();
            display: inline-block;
            width: 56px;
            height: 56px;
            position: relative;
            top: 6px;
            left: -16px;
            /* background: lightblue; */
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50%;
            -webkit-transform: rotate(180deg) translateZ(0);
            transform: rotate(180deg) translateZ(0);
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
        }

        .nation-table-cell-content {
            /* background: lightcoral; */
        }

        .active {
            transform: rotate(0deg) translateZ(0);
        }
    </style>



    <div>
        <span class="nation-table-cell-content"> New York </span>
        <span class="nation-table-cell-arrow "></span>
    </div>
    <script>
        document.getElementsByClassName("nation-table-cell-content")[0].onclick = function () {
            // document.getElementsByClassName("nation-table-cell-arrow")[0].style.cssText = "    ";
            document.getElementsByClassName("nation-table-cell-arrow")[0].classList.toggle("active")
        }
    </script>



    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">

        arrow-toggle

        *{
        margin: 0;padding: 0;
        font-size: 56px;
        }
        .nation-table-cell-arrow {
        background-image:
        url();
        display: inline-block;
        width: 56px;
        height: 56px;
        position: relative;
        top: 6px;
        left: -16px;
        /* background: lightblue; */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        -webkit-transform: rotate(180deg) translateZ(0);
        transform: rotate(180deg) translateZ(0);
        -webkit-transition: all .3s ease-out;
        transition: all .3s ease-out;
        }
        .nation-table-cell-content{
        /* background: lightcoral; */
        }
        .active{
        transform: rotate(0deg) translateZ(0);
        }
        <div>
            <span class="nation-table-cell-content"> New York </span>
            <span class="nation-table-cell-arrow "></span>
        </div>
        <script>
            document.getElementsByClassName("nation-table-cell-content")[0].onclick = function () {
                // document.getElementsByClassName("nation-table-cell-arrow")[0].style.cssText = "    ";
                document.getElementsByClassName("nation-table-cell-arrow")[0].classList.toggle("active")
            }
        </script>


    </xmp>

    <hr>



    









</body>

</html>